<template>
  <div class="options-preview-images" @click="resetBtn">
    <img @click.stop="" :src="image.fileUrl" :class="isFullScreen?'full-screen':''"
         :style="{'transform': 'scale('+scale+') rotate('+rotate+'deg)'}"/>

    <i @click.stop="changeBtn(1)" class="el-icon-caret-right ios-arrow-forward el-icon-com"></i>
    <i @click.stop="changeBtn(2)" class="ios-arrow-back el-icon-caret-left el-icon-com"></i>

    <i @click.stop="changeBtn(3)" class="ios-close-circle-outline el-icon-close el-icon-com"></i>
    <div class="opi-footer">
      <Tooltip content="缩小">
        <i @click.stop="operateImage(1)" class="el-icon-remove el-icon-footer" ></i>
      </Tooltip>
      <Tooltip content="放大">
        <i @click.stop="operateImage(2)" class="el-icon-circle-plus el-icon-footer"></i>
      </Tooltip>
      <Tooltip content="旋转">
        <i @click.stop="operateImage(3)" class="el-icon-refresh-right el-icon-footer"></i>
      </Tooltip>
    </div>
  </div>
</template>

<script>

module.exports = {
  name: "Preview",
  props: {
    images: {
      type: Array,
      deep: true,
      immediate: true
    },
    currentIndex: {
      type: Number,
      default: 0
    }
  },
  watch: {
    currentIndex: {
      handler (v) {
        // if (isEmpty(v)) {
        //  return;
        // }
        this.show(v);
      },
      deep: true,
      immediate: true
    }

  },
  data () {
    return {
      scale: 0.5,
      rotate: 0,
      image: {},
      isFullScreen: false,
      index: 0
    };
  },
  methods: {
    show (v) {
      this.scale = 0.5;
      this.rotate = 0;
      this.index = v;
      this.image = this.images[v];
    },
    operateImage (btn) {
      if (1 === btn) {
        let scale = this.scale;
        scale -= 0.2;
        if (scale <= 0.2) {
          scale = 0.2;
        }
        this.scale = scale;
      }
      if (2 === btn) {
        let scale = this.scale;
        scale += 0.2;
        if (scale >= 50) {
          scale = 50;
        }
        this.scale = scale;
      }
      if (3 === btn) {
        let rotate = this.rotate;
        if (rotate >= 360) {
          rotate = 0;
        }
        rotate += 90;
        if (rotate >= 360) {
          rotate = 360;
        }
        this.rotate = rotate;
      }
      if (4 === btn) {
        this.isFullScreen = !this.isFullScreen;
      }
      if (5 === btn) {
        this.$Modal.confirm({
          title: '是否删除图片',
          loading: true,
          onOk: () => {
            this.resetBtn(btn);
            this.$Modal.remove();
            this.$Message.info('删除成功');
            // if (isAuthorization()) {
            // deleteImage(this.image.id);
            //}
          }
        });
      }
      if (6 === btn) {
        window.open(this.image.source, '_blank');
      }
      if (7 === btn) {
        // postMessage({ name: 'setting_wallpaper', val: this.image.fileUrl });
      }
    },
    changeBtn (btn) {
      if (3 === btn) {
        this.resetBtn(btn);
        return;
      }
      let index = this.index;
      if (1 === btn) {
        index = index <= 0 ? 0 : index - 1;
      }
      if (2 === btn) {
        index = index < this.images.length - 1 ? index + 1 : this.images.length - 1;
      }
      this.index = index;
      this.image = this.images[index];
    },
    resetBtn (type) {
      this.$emit('close', type);
    }
  }
};
</script>

<style scoped>
.options-preview-images {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
//opacity: .5; background: #000000b0; display: flex; justify-content: center; align-items: center;

  .el-icon-com {
    font-size: 80px;
    color: #FFFFFF;
  }

  .ios-arrow-back {
    position: absolute;
    left: 0;
    color: #fff;
    cursor: pointer;
  }

  .ios-arrow-forward {
    position: absolute;
    right: 0;
    color: #fff;
    cursor: pointer;
  }

  .ios-close-circle-outline {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    cursor: pointer;
  }

  .full-screen {
    width: 100%;
    height: 100%;
  }

  .opi-footer {
    height: 50px;
    position: absolute;
    bottom: 30px;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    padding: 0 20px;
    align-items: center;

    .el-icon-footer {
      font-size: 30px;
      padding: 0 10px;
      cursor: pointer;
    }
  }
}
</style>
